<template>
  <div class="sign">
    <p class="up"><img src="../../assets/contract/shangchuan@2x.png" alt=""> &nbsp;&nbsp;&nbsp;上传本地文件</p>
    <div class="contract">
      <div class="block">
        <div class="block-top">
          <p><img src="../../assets/contract/icon_hetong.png" alt=""></p>
          <p>
            <a class="text-name">固定期限劳动合同</a>
            <a class="time"><span>20KB</span> <span>2021-7-6 17:49:35</span></a>
            <a class="btn" @click="sendSign()">发送签署</a>
          </p>
        </div>
        <div class="block-bottom">
          <span><img src="../../assets/contract/icon_bianji.png" alt=""><a>编辑</a></span>
          <span><img src="../../assets/contract/icon_dayin.png" alt=""><a>打印</a></span>
          <span><img src="../../assets/contract/icon_xiazai.png" alt=""><a>下载</a></span>
          <span @click="deleteContract()"><img src="../../assets/contract/icon_del.png" alt=""><a>删除</a></span>
        </div>
      </div>
      <div class="block">
        <div class="block-top">
          <p><img src="../../assets/contract/icon_hetong.png" alt=""></p>
          <p>
            <a class="text-name">固定期限劳动合同</a>
            <a class="time"><span>20KB</span><span>2021-7-6 17:49:35</span></a>
            <a class="btn">发送签署</a>
          </p>
        </div>
        <div class="block-bottom">
          <span><img src="../../assets/contract/icon_bianji.png" alt=""><a>编辑</a></span>
          <span><img src="../../assets/contract/icon_dayin.png" alt=""><a>打印</a></span>
          <span><img src="../../assets/contract/icon_xiazai.png" alt=""><a>下载</a></span>
          <span><img src="../../assets/contract/icon_del.png" alt=""><a>删除</a></span>
        </div>
      </div>
      <div class="block">
        <div class="block-top">
          <p><img src="../../assets/contract/icon_hetong.png" alt=""></p>
          <p>
            <a class="text-name">固定期限劳动合同</a>
            <a class="time"><span>20KB</span><span>2021-7-6 17:49:35</span></a>
            <a class="btn">发送签署</a>
          </p>
        </div>
        <div class="block-bottom">
          <span><img src="../../assets/contract/icon_bianji.png" alt=""><a>编辑</a></span>
          <span><img src="../../assets/contract/icon_dayin.png" alt=""><a>打印</a></span>
          <span><img src="../../assets/contract/icon_xiazai.png" alt=""><a>下载</a></span>
          <span><img src="../../assets/contract/icon_del.png" alt=""><a>删除</a></span>
        </div>
      </div>
      <div class="block">
        <div class="block-top">
          <p><img src="../../assets/contract/icon_hetong.png" alt=""></p>
          <p>
            <a class="text-name">固定期限劳动合同</a>
            <a class="time"><span>20KB</span><span>2021-7-6 17:49:35</span></a>
            <a class="btn">发送签署</a>
          </p>
        </div>
        <div class="block-bottom">
          <span><img src="../../assets/contract/icon_bianji.png" alt=""><a>编辑</a></span>
          <span><img src="../../assets/contract/icon_dayin.png" alt=""><a>打印</a></span>
          <span><img src="../../assets/contract/icon_xiazai.png" alt=""><a>下载</a></span>
          <span><img src="../../assets/contract/icon_del.png" alt=""><a>删除</a></span>
        </div>
      </div>
      <!-- 删除合同提示弹窗 -->
      <div class="dialog-delete">
        <el-dialog :visible.sync="isDelete" width="375px" top="30vh">
          <span class="center"><img src="../../assets/contract/icon_tixiang.png" alt=""></span>
          <p class="center">确定要删除该待签署的文件吗</p>
          <span slot="footer" class="dialog-footer other">
            <el-button type="success" @click="centerDialogVisible = false">确 定</el-button>
            <span style="display:inline-block;width:40px;" />
            <el-button @click="isDelete = false">取 消</el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 发起签署弹窗 -->
      <div class="dialog-signed">
        <el-dialog :visible.sync="isSigned" width="900px" top="15vh" title="发送签署" center>
          <div class="dia-top">
            <!-- <span><i class="el-icon-plus"></i><a>新增</a></span>
            <span><i><img src="../../assets/contract/icon_shaixuan.png" alt=""></i><a>筛选</a></span>
            <span><i><img src="../../assets/contract/icon_dayin.png" alt=""></i><a>打印</a></span>
            <span><i><img src="../../assets/contract/icon_daochu.png" alt=""></i><a>导出</a></span> -->
            <a>
              <el-input v-model="serchName" placeholder="搜索合同名称" />
              <el-button type="danger">搜索</el-button>
            </a>
          </div>
          <div class="table-main">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" />
              <el-table-column prop="name" label="序号"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column>
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="address" label="邮箱" />
              <el-table-column prop="address" label="联系电话" />
              <el-table-column prop="address" label="是否认证" />
            </el-table>
            <div class="page">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="100"
              />
            </div>
            <div class="dialog-footer">
              <el-button type="primary" @click="centerDialogVisible = false">发起签署</el-button>
              <span style="display:inline-block;width:40px;" />
              <el-button @click="isSigned = false">取 消</el-button>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serchName: '',
      tableData: [],
      isDelete: false,
      isSigned: false
    }
  },
  methods: {
    deleteContract() {
      this.isDelete = true
    },
    sendSign() {
      this.isSigned = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
.sign{
  width:100%;
  background:#fff;
  height: calc(100vh - 170px);
  padding-top:30px;
}
.up{
  font-size:14px;
  border:1px solid #D2D2D2;
  width:140px;
  border-radius:25px;
  padding:10px 15px;
  margin: 0 30px;
}
.contract{
  height: calc(100vh - 240px);
  overflow-y: auto;
}
.block{
  display: inline-block;
  float: left;
  margin:20px 75px;
}
.block-top{
  height:140px;
}
.block-top>p{
  display:inline-block;
  float:left;
  margin:0;
}
.block-top>p>a{
  display:block;
}
.text-name{
  font-weight:bold;
}
.time{
  font-size:14px;
  color:#999;
  margin:20px 0
}
.btn{
  width:110px;
  height:35px;
  line-height: 35px;
  color:#E73838;
  border:1px solid #E73838;
  border-radius:15px;
  text-align:center;
}
.block-bottom{
  height:20px;
  float:left;
}
.block-bottom>span{
  margin:0 8px;
}
.block-bottom>span>a{
  margin-left:5px;
  font-size:14px;
}
.dialog-delete /deep/.el-dialog {
  height:275px;
}
.dialog-delete .center{
  text-align: center;
  display: block;
}
/deep/.el-dialog__body{
  padding:20px;
}
/deep/.el-dialog__footer{
  text-align: center;
}
/deep/.el-button--primary{
  background-color: #E20909;
  border-color: #E20909;
  border-radius:20px;
  width:190px;
}
/deep/.el-button--default{
  border-radius:20px;
  width:190px;
}
.dialog-signed /deep/.el-dialog{
  height:600px;
  border-radius:10px;
}
.dialog-delete /deep/.el-dialog{
  border-radius:10px;
}
.dialog-signed /deep/.el-dialog__header{
  padding:10px;
  background:#eee;
  border-radius:10px 10px 0 0;
}
.dialog-delete /deep/.el-dialog__header{
  border-radius:10px 10px 0 0;
}
/deep/.el-dialog__close{
  display:none;
}
/deep/.el-input {
  width:300px;
}
.dia-top{
  overflow: hidden;
  line-height: 36px;
  margin-bottom:30px;
}
.dia-top>span{
  margin:0 10px;
}
.dia-top>span>a{
  margin-left:5px;
}
.dia-top>a{
  float:right;
}
/deep/.el-input--medium .el-input__inner{
  border-radius:0;
}
/deep/.el-button--danger{
  width:100px;
  border-radius:0 5px 5px 0;
  background:#DF090D;
}
/deep/.el-table th{
  background:#F7F7F7;
}
/deep/.el-table th.is-leaf{
  border:none;
}
/deep/.el-table thead{
  color:#666;
}
/deep/.dialog-footer{
  text-align: center;
  margin-top:30px;
}
.page{
  text-align: center;
  margin-top:30px;
  height:30px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background:#E21111;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
  color:#E21111;
}
/deep/.el-dialog__title{
  font-size:16px;
}
.other /deep/.el-button--default{
  border-radius:20px;
  width:100px;
}
/deep/.el-button--success{
  background-color: #E20909;
  border-color: #E20909;
  border-radius:20px;
  width:100px;
}
</style>
